<template>
  <div class="sms cen">
    <back title="级联选择器"></back>

    <btn style="width:90%;display:block;margin:20px auto;" @click.native="cityPicker">选择城市</btn>
    <input type="text" v-model="cityV">
    <btn style="width:90%;display:block;margin:20px auto;" @click.native="datePicker">选择时间</btn>
    <input type="text" v-model="dateV">
  </div>
</template>

<script>
  import '@/css/picker.css'
  import '@/utils/picker-weui'

  export default {
    name: 'picker',
    data () {
      return{
        cityV:'',
        dateV:''
      }
    },
    components:{
      
    },
    methods:{
      cityPicker(){
        weui.picker([{
            label: '广东',
            value: 0,
            children: [{
                label: '广州',
                value: 0,
                children: [{
                    label: '海珠',
                    value: 0
                }, {
                    label: '番禺',
                    value: 1
                }]
            }, {
                label: '佛山',
                value: 1,
                children: [{
                    label: '禅城',
                    value: 0
                }, {
                    label: '南海',
                    value: 1
                }]
            }]
        }, {
            label: '广西',
            value: 1,
            children: [{
                label: '南宁',
                value: 0,
                children: [{
                    label: '青秀',
                    value: 0
                }, {
                    label: '兴宁',
                    value: 1
                }]
            }, {
                label: '桂林',
                value: 1,
                children: [{
                    label: '象山',
                    value: 0
                }, {
                    label: '秀峰',
                    value: 1
                }]
            }]
        }], {
          depth: 3,
          defaultValue: [0, 1, 1],
          // onChange: function(res){
          //   console.log(res);
          // },
          onConfirm: (res)=>{
            this.cityV=res[0].label+res[1].label+res[2].label
          }
        });
      },
      datePicker(){
        const newdate=new Date()
        weui.datePicker({
          start: 1990,
          end: 2019,
          defaultValue: [newdate.getFullYear(), newdate.getMonth()+1, newdate.getDate()],
          /*onChange: function(res){
              console.log(res);
          },*/
          onConfirm: (res)=>{
            this.dateV=res[0].label+res[1].label+res[2].label
          }
        });
      }
    },
    mounted(){
      
    }
  }
</script>

<style lang="less" scoped>
  
</style>